<template>
  <div class="api-demo">
    <h2>Django API 连接测试</h2>
    
    <div class="demo-section">
      <h3>环境信息</h3>
      <p><strong>前端端口:</strong> 3000</p>
      <p><strong>后端地址:</strong> {{ backendUrl }}</p>
      <p><strong>API基础URL:</strong> {{ apiBaseUrl }}</p>
      <p><strong>环境模式:</strong> {{ mode }}</p>
    </div>
    
    <div class="demo-section">
      <h3>API 测试</h3>
      <button @click="testConnection" :disabled="loading" class="test-btn">
        {{ loading ? '测试中...' : '测试后端连接' }}
      </button>
      
      <div v-if="result" class="result" :class="result.type">
        <h4>{{ result.type === 'success' ? '✓ 连接成功' : '✗ 连接失败' }}</h4>
        <pre>{{ result.data }}</pre>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>使用说明</h3>
      <div class="instructions">
        <p><strong>1. 代理配置:</strong> 前端请求 <code>/api/*</code> 会自动转发到 Django 后端</p>
        <p><strong>2. 在组件中使用:</strong></p>
        <pre><code>import api from '@/utils/api'

// GET 请求示例
const data = await api.get('/your-endpoint/')

// POST 请求示例
const result = await api.post('/your-endpoint/', { key: 'value' })</code></pre>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import api, { createBackendUrl } from '@/utils/api'

const loading = ref(false)
const result = ref(null)

// 环境信息
const mode = import.meta.env.MODE
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL
const backendUrl = import.meta.env.VITE_BACKEND_BASE_URL

// 测试连接
const testConnection = async () => {
  loading.value = true
  result.value = null
  
  try {
    // 尝试连接Django的admin页面或根路径
    const response = await fetch('/admin/', { 
      method: 'GET',
      headers: {
        'Accept': 'text/html,application/json'
      }
    })
    
    if (response.ok) {
      result.value = {
        type: 'success',
        data: `连接成功!\n状态码: ${response.status}\n响应类型: ${response.headers.get('content-type')}\n后端服务正常运行`
      }
    } else {
      result.value = {
        type: 'error',
        data: `连接失败!\n状态码: ${response.status}\n状态文本: ${response.statusText}`
      }
    }
  } catch (error) {
    result.value = {
      type: 'error',
      data: `连接错误!\n错误信息: ${error.message}\n请确保Django服务运行在 http://127.0.0.1:8000`
    }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.api-demo {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.demo-section h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 2px solid #007acc;
  padding-bottom: 10px;
}

.test-btn {
  background-color: #007acc;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.test-btn:hover:not(:disabled) {
  background-color: #005a9e;
}

.test-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.result {
  margin-top: 15px;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid;
}

.result.success {
  background-color: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.result.error {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.result h4 {
  margin-top: 0;
  margin-bottom: 10px;
}

.result pre {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.instructions {
  line-height: 1.6;
}

.instructions code {
  background-color: #e9ecef;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

.instructions pre {
  background-color: #e9ecef;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}

.instructions pre code {
  background-color: transparent;
  padding: 0;
}

p {
  margin: 8px 0;
}
</style>